﻿@{
    ViewData["Title"] = "SocialBoard";
}

<div class="normalheader transition animated fadeIn">
    <div class="hpanel">
        <div class="panel-body">
            <a class="small-header-action" href="">
                <div class="clip-header">
                    <i class="fa fa-arrow-up"></i>
                </div>
            </a>

            <div id="hbreadcrumb" class="pull-right m-t-lg">
                <ol class="hbreadcrumb breadcrumb">
                    <li><a href="@Url.Action("Index", "Dashboard")">Dashboard</a></li>
                    <li>
                        <span>App views</span>
                    </li>
                    <li class="active">
                        <span>Social board </span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                Social board
            </h2>
            <small>Message board for social interactions.</small>
        </div>
    </div>
</div>

<div class="content animate-panel">

    <div class="row social-board">
        <div class="col-lg-4">
            <div class="hpanel hblue">
                <div class="panel-body">
                    <div class="media social-profile clearfix">
                        <a class="pull-left">
                            <img src="~/Images/a4.jpg" alt="profile-picture">
                        </a>
                        <div class="media-body">
                            <h5>Anna Smith</h5>
                            <small class="text-muted">21.03.2015</small>
                        </div>
                    </div>

                    <div class="social-content m-t-md">
                        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a1.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">John Novak</span>
                                <small class="text-muted">21.03.2015</small>

                                <div class="social-content">
                                    Injected humour, or randomised words which don't look even slightly believable.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a3.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">Mark Smith</span>
                                <small class="text-muted">14.04.2015</small>
                                <div class="social-content">
                                    Many desktop publishing packages and web page editors.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-form">
                        <input class="form-control" placeholder="Your comment">
                    </div>
                </div>
            </div>
            <div class="hpanel hyellow">
                <div class="panel-body">
                    <div class="media social-profile clearfix">
                        <span class="label label-warning pull-right">NEW</span>
                        <a class="pull-left">
                            <img src="~/Images/a2.jpg" alt="profile-picture">
                        </a>
                        <div class="media-body">
                            <h5>Ivan Novak</h5>
                            <small class="text-muted">26.11.2015</small>
                        </div>
                    </div>
                    <div class="social-content m-t-md">
                        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a4.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">John Novak</span>
                                <small class="text-muted">21.03.2015</small>

                                <div class="social-content">
                                    Injected humour, or randomised words which don't look even slightly believable.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-form">
                        <input class="form-control" placeholder="Your comment">
                    </div>
                </div>
            </div>
            <div class="hpanel hgreen">
                <div class="panel-body">
                    <div class="media social-profile clearfix">
                        <a class="pull-left">
                            <img src="~/Images/a7.jpg" alt="profile-picture">
                        </a>
                        <div class="media-body">
                            <h5>John Smith</h5>
                            <small class="text-muted">13.05.2015</small>
                        </div>
                    </div>

                    <div class="social-content m-t-md">
                        There are many variations of passages of Lorem Ipsum available, but the majority have By injected humour, or randomised words which don't look even slightly believable.
                        <img class="img-responsive m-t-md" src="~/Images/p2.jpg" alt="">

                    </div>
                </div>
                <div class="panel-footer">
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a1.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">John Novak</span>
                                <small class="text-muted">21.03.2015</small>

                                <div class="social-content">
                                    Injected humour, or randomised words which don't look even slightly believable.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a3.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">Mark Smith</span>
                                <small class="text-muted">14.04.2015</small>
                                <div class="social-content">
                                    Many desktop publishing packages and web page editors.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-form">
                        <input class="form-control" placeholder="Your comment">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="hpanel hgreen">
                <div class="panel-body">
                    <div class="media social-profile clearfix">
                        <a class="pull-left">
                            <img src="~/Images/a7.jpg" alt="profile-picture">
                        </a>
                        <div class="media-body">
                            <h5>John Smith</h5>
                            <small class="text-muted">13.05.2015</small>
                        </div>
                    </div>

                    <div class="social-content m-t-md">
                        There are many variations of passages of Lorem Ipsum available, but the majority have By injected humour, or randomised words which don't look even slightly believable.
                        <br /><br />
                        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.

                    </div>
                </div>
                <div class="panel-footer">
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a1.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">John Novak</span>
                                <small class="text-muted">21.03.2015</small>

                                <div class="social-content">
                                    Injected humour, or randomised words which don't look even slightly believable.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a3.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">Mark Smith</span>
                                <small class="text-muted">14.04.2015</small>
                                <div class="social-content">
                                    Many desktop publishing packages and web page editors.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-form">
                        <input class="form-control" placeholder="Your comment">
                    </div>
                </div>
            </div>
            <div class="hpanel hblue">
                <div class="panel-body">
                    <div class="media social-profile clearfix">
                        <a class="pull-left">
                            <img src="~/Images/a4.jpg" alt="profile-picture">
                        </a>
                        <div class="media-body">
                            <h5>Anna Smith</h5>
                            <small class="text-muted">10.06.2015</small>
                        </div>
                    </div>

                    <div class="social-content m-t-md">
                        Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a1.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">John Novak</span>
                                <small class="text-muted">21.03.2015</small>

                                <div class="social-content">
                                    Injected humour, or randomised words which don't look even slightly believable.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a3.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">Mark Smith</span>
                                <small class="text-muted">14.04.2015</small>
                                <div class="social-content">
                                    Many desktop publishing packages and web page editors.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-form">
                        <input class="form-control" placeholder="Your comment">
                    </div>
                </div>
            </div>
            <div class="hpanel hyellow">
                <div class="panel-body">
                    <div class="media social-profile clearfix">
                        <span class="label label-warning pull-right">NEW</span>
                        <a class="pull-left">
                            <img src="~/Images/a6.jpg" alt="profile-picture">
                        </a>
                        <div class="media-body">
                            <h5>Mark Smith</h5>
                            <small class="text-muted">02.02.2015</small>
                        </div>
                    </div>
                    <div class="social-content m-t-md">
                        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a2.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">John Novak</span>
                                <small class="text-muted">21.03.2015</small>

                                <div class="social-content">
                                    Injected humour, or randomised words which don't look even slightly believable.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-form">
                        <input class="form-control" placeholder="Your comment">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="hpanel hyellow">
                <div class="panel-body">
                    <div class="media social-profile clearfix">
                        <span class="label label-warning pull-right">NEW</span>
                        <a class="pull-left">
                            <img src="~/Images/a6.jpg" alt="profile-picture">
                        </a>
                        <div class="media-body">
                            <h5>Mark Smith</h5>
                            <small class="text-muted">02.02.2015</small>
                        </div>
                    </div>
                    <div class="social-content m-t-md">
                        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a2.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">John Novak</span>
                                <small class="text-muted">21.03.2015</small>

                                <div class="social-content">
                                    Injected humour, or randomised words which don't look even slightly believable.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-form">
                        <input class="form-control" placeholder="Your comment">
                    </div>
                </div>
            </div>
            <div class="hpanel hgreen">
                <div class="panel-body">
                    <div class="media social-profile clearfix">
                        <a class="pull-left">
                            <img src="~/Images/a7.jpg" alt="profile-picture">
                        </a>
                        <div class="media-body">
                            <h5>John Smith</h5>
                            <small class="text-muted">13.05.2015</small>
                        </div>
                    </div>

                    <div class="social-content m-t-md">
                        There are many variations of passages of Lorem Ipsum available, but the majority have By injected humour, or randomised words which don't look even slightly believable (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance
                        .
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a1.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">John Novak</span>
                                <small class="text-muted">21.03.2015</small>

                                <div class="social-content">
                                    Injected humour, or randomised words which don't look even slightly believable.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-form">
                        <input class="form-control" placeholder="Your comment">
                    </div>
                </div>
            </div>
            <div class="hpanel hblue">
                <div class="panel-body">
                    <div class="media social-profile clearfix">
                        <a class="pull-left">
                            <img src="~/Images/a9.jpg" alt="profile-picture">
                        </a>
                        <div class="media-body">
                            <h5>Michael Smith</h5>
                            <small class="text-muted">21.03.2015</small>
                        </div>
                    </div>

                    <div class="social-content m-t-md">
                        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a1.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">John Novak</span>
                                <small class="text-muted">21.03.2015</small>

                                <div class="social-content">
                                    Injected humour, or randomised words which don't look even slightly believable.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a3.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">Mark Smith</span>
                                <small class="text-muted">14.04.2015</small>
                                <div class="social-content">
                                    Many desktop publishing packages and web page editors.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-talk">
                        <div class="media social-profile clearfix">
                            <a class="pull-left">
                                <img src="~/Images/a1.jpg" alt="profile-picture">
                            </a>

                            <div class="media-body">
                                <span class="font-bold">Mark Smith</span>
                                <small class="text-muted">14.04.2015</small>
                                <div class="social-content">
                                    Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="social-form">
                        <input class="form-control" placeholder="Your comment">
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
